<template>
  <!-- 填报条件 -->
  <div class="task_container">
    <div class="task">
      <div class="baseInfo">
        <div class="title">
          <div>组织信息：</div>
          <span>{{ basicInformation.orgId }}</span>
        </div>

        <div class="title">
          <div>核算标准：</div>
          <span>{{ basicInformation.standardName }}</span>
        </div>
        <div class="title">
          <div>核算行业：</div>
          <span>{{ basicInformation.industryName }}</span>
        </div>
        <div class="title">
          <div>核算周期：</div>
          <span>
            {{ basicInformation.startTime }} -
            {{ basicInformation.endTime }}
          </span>
        </div>
      </div>
      <!-- 填报数据 -->
      <div style="width: 100%">
        <a-tabs>
          <a-tab-pane v-for="(item, index) in fillData" :key="item.boundaryId">
            <span slot="tab">
              <a-icon :type="item.boundaryIcon" />
              {{ item.boundaryName }}
            </span>
            <!-- k每个面板对象 v索引 -->
            <transition-group name="list" tag="ul" class="AccountingEntries">
              <li
                class="AccountingEntriesPanel"
                v-for="(accountingObj, accountingIdx) in item.data"
                :key="accountingObj.id"
              >
                <div class="AccountingEntriesPanel_box">
                  <div class="delete">
                    <a-popconfirm title="是否要删除该数据？" @confirm="removeFun(index, accountingIdx)">
                      <a-icon type="close" class="iconfont" />
                    </a-popconfirm>
                  </div>
                  <!-- 用户填写的数据 -->
                  <div class="row" v-for="(row, rowIdx) in accountingObj.dataList" :key="rowIdx">
                    <!-- <a-icon type="code-sandbox" style="color: #50baf3" /> -->
                    <div style="flex: 1; padding-right: 10px">
                      <div class="name">{{ row.showName || row.itemName || row.fieldName }}</div>
                      <a-select
                        v-myfocus
                        :placeholder="`请选择${row.itemName}`"
                        class="type"
                        v-if="row.type == 1"
                        @change="
                          handleChangetype(
                            $event,
                            row,
                            rowIdx,
                            index,
                            accountingIdx
                          )
                        "
                      >
                        <a-select-option
                          v-for="key in row.selectList"
                          :key="key.itemName"
                        >{{ key.itemName }}</a-select-option>
                      </a-select>
                      <!-- <a-input-number
            :precision="0.1"
            style="width: 100%"
            :min="0"
            :disabled="showable"
            placeholder="请输入"
                      v-model="row.defaultValue"/>-->

                      <a-input
                        :placeholder="`请输入${row.fieldName}`"
                        v-else
                        type="text"
                        :name="row.defaultValue"
                        id
                        v-myfocus
                        v-model="row.defaultValue"
                        onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
                        @change="
                          (e) =>
                            inputHandleChange(
                              e.target.value,
                              rowIdx,
                              index,
                              accountingIdx
                            )
                        "
                      />
                    </div>
                    <div v-if="row.type == 1 || row.unit == ''" class="unit"></div>
                    <a-select v-else class="unit" style :default-value="row.unit || '千克'">
                      <a-select-option
                        :value="unit"
                        v-for="(unit, idx) in row.unitList"
                        :key="idx"
                      >{{ unit }}</a-select-option>
                    </a-select>
                  </div>
                </div>
              </li>
              <li class="AccountingEntriesPanel" key="abc">
                <div
                  class="AccountingEntriesPanel_add bg_add"
                  @click="addAccountingFun(item, index)"
                >
                  <div class="cen_">
                    <a-icon class="iconfont_" type="plus" style />
                    <div style="text-align: center">新建核算项</div>
                  </div>
                </div>
              </li>
            </transition-group>
          </a-tab-pane>
        </a-tabs>

        <div class="footer">
          <div class="page">
            <!-- <a-pagination simple :default-current="2" :total="50" /> -->
          </div>

          <div class="btn_box">
            <div class="Preview" @click="Preview(true)">
              <div class="text">预览核算数据</div>
            </div>
            <div class="previous" @click="step(stepsCurrent - 1)">上一步</div>

            <div class="next" @click="step(2, stepsCurrent + 1)">下一步</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import bus from "@/bus";
import {
  getInitAddUnitByUnitId,
  accountingFill,
  accountingFillBaseInfo
} from "@/api/api";
import { Mixin } from "@/mixins/mixin.js";
export default {
  // props: ["cycleId"],
  data() {
    return {
      memberLoading: false,
      form: this.$form.createForm(this),
      currentAccountingObj: null
    };
  },
  mixins: [Mixin],
  methods: {
    step(step) {
      this.setStepsCurrent(step);
    },
    //   删除
    removeFun(index, accountingIdx) {
      this.fillData[index]["data"].splice(accountingIdx, 1);
    },
    //   添加核算项
    addAccountingFun(accountingItem, index) {
      var standardAssignmentObj = Object.assign(
        {
          boundaryName: accountingItem.boundaryName,
          boundaryId: accountingItem.boundaryId,
          level: accountingItem.level,
          hasLeaf: accountingItem.hasLeaf,
          parentId: accountingItem.parentId ? accountingItem.parentId : ""
        },
        { dataList: [] },
        { id: Number(new Date()) }
      );
      if (accountingItem["template"].type == 1) {
        //如果类型是下来框情况
        standardAssignmentObj.dataList = [accountingItem["template"]];
        accountingItem["data"].push(standardAssignmentObj);
      } else {
        //不是下拉框的情况
        const target = accountingItem["template"]["selectList"][0];
        var fieldListArr = [];
        target.fieldList.forEach(fieldListItem => {
          fieldListArr.push({
            ...fieldListItem
          });
        });
        standardAssignmentObj.dataList = fieldListArr;
        accountingItem["data"].push(standardAssignmentObj);
      }
    },
    // 修改属性值
    inputHandleChange(value, rowIdx, index, accountingIdx) {
      this.$set(
        this.fillData[index]["data"][accountingIdx]["dataList"][rowIdx],
        "defaultValue",
        value
      );
      this.$set(
        this.fillData[index]["data"][accountingIdx],
        "defaultValue",
        value
      );
    },
    // 下拉框修改
    handleChangetype($event, row, rowIdx, index, accountingIdx) {
      // index 边界的idx   accountingIdx 核算项的idx  rowIdx 每一行的idx
      this.fillData[index]["data"][accountingIdx].dataList.splice(rowIdx + 1); //操作的时候清除下一层
      if (
        this.fillData[index]["data"][accountingIdx]["dataList"][rowIdx]
          .selectList
      ) {
        var currentArr = this.fillData[index]["data"][accountingIdx][
          "dataList"
        ][rowIdx].selectList;
        const target = currentArr.find(item => {
          //   console.log(item, $event);
          return item.itemName === $event;
        });
        // //   console.log(target);
        if (target.type == 1) {
          // 判断是不是最底层 1为下拉框
          // this.fillData[index]["data"][accountingIdx].boundaryId = target.boundaryId
          setTimeout(() => {
            this.fillData[index]["data"][accountingIdx]["dataList"].push({
              ...target
            });
          }, 0);
        } else {
          //    console.log(
          //   this.fillData[index]["data"][accountingIdx]["dataList"].length
          // );
          // 最底层 直接给出默认值
          setTimeout(() => {
            // 用户数据里添加核算项
            this.fillData[index]["data"][accountingIdx]["typeId"] =
              target.itemId;
            this.fillData[index]["data"][accountingIdx]["itemName"] =
              target.itemName;
            this.fillData[index]["data"][accountingIdx]["defaultValue"] =
              target.fieldList[0].defaultValue;
            // this.fillData[index]['data'][accountingIdx]['id']= item.itemId
            target.fieldList.forEach(item => {
              this.fillData[index]["data"][accountingIdx]["dataList"].push({
                ...item,
                boundaryId: target.boundaryId //每一层的boundaryId放进去  
              });
            });
            // this.fillData[index]["data"][accountingIdx]["dataList"];
            // //   console.log(
            //   this.fillData[index]["data"][accountingIdx]["dataList"]
            // );
          }, 0);
        }

      }
    },
    Preview(bool) {
      bus.$emit("showPreviewFun", bool);
    }
  }
};
</script>

<style lang="scss">
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(60px);
}
@media screen and (min-width: 1200px) {
  .task_container {
    margin: auto;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    .AccountingEntries {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 0 20px 20px;
      list-style: none;
      .addAccounting {
        width: 100%;
        border-top: 1px solid #f1f1f1;
        padding: 20px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .AccountingEntriesPanel {
        width: 33%;

        min-height: 140px;
        padding: 5px;
        transition: 0.2s;
        .bg_add:hover {
          background: rgba(235, 235, 235, 0.5);
          transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .cen_ {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          //    align-content:center;
          justify-content: center;
        }
        .AccountingEntriesPanel_add {
          display: flex;
          flex-direction: column;
          align-items: center;
          align-content: center;
          cursor: pointer;
          height: 100%;
          border: 1px solid #ebebeb;
          color: #262a2f;
          font-size: 16px;
          padding: 10px 30px 20px;
          border-radius: 10px;
          box-shadow: 0px 8px 16px rgba(140, 160, 179, 18%);
          transition: 0.2s;
          &:hover .iconfont_ {
            transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform: rotate(90deg);
          }
          .iconfont_ {
            transform: rotate(0deg);
            transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            color: #50baf3;
            font-size: 46px;
            font-weight: 600;
            margin-right: 6px;
          }
        }
        .AccountingEntriesPanel_box {
          position: relative;
          cursor: pointer;
          height: 100%;
          border: 1px solid #ebebeb;
          color: #262a2f;
          font-size: 16px;
          padding: 10px 30px 20px;
          border-radius: 10px;
          box-shadow: 0px 8px 16px rgba(140, 160, 179, 18%);
          display: flex;
          flex-direction: column;
          // justify-content: center;
          background: #fff;
          transition: 0.2s;

          // &:hover {
          //   transition: 0.2s;
          //   background: rgba(221, 221, 221, 0.2);
          //   cursor: pointer;
          // }
          .delete {
            position: absolute;
            top: 0px;
            right: 10px;

            font-size: 12px;
            color: #ccc;
            line-height: 40px;
            cursor: pointer;
            .iconfont {
              font-size: 16px;
              font-weight: 700 !important;
              cursor: pointer;
              transform: rotate(0deg);
              transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              &:hover {
                color: rgb(47, 106, 233);
                transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                transform: rotate(90deg);
              }
            }
          }
          .row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            line-height: 30px;
            border-bottom: 1px solid #f1f1f1;
            .ant-input {
              width: 100%;
              border: 1px solid #fff;
              &:hover {
                border: 1px solid #40a9ff;
              }
            }

            .unit {
              min-width: 80px;
            }

            .name {
              display: flex;
              flex-direction: row;
              align-items: center;
              flex-wrap: nowrap;
              justify-content: flex-start;
              color: #50baf3;
              font-weight: 600;
              white-space: nowrap;
              font-size: 14px;

              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              .anticon {
                margin-right: 4px;
              }
            }
            .unit {
              .ant-select-selection {
                //   background-color: #f8f8f8 !important;
                border: 1px solid #fff !important;
              }
            }
            .type {
              width: 100%;
              .ant-select-selection {
                //   background-color: #f8f8f8 !important;
                //   border: 1px solid #f8f8f8 !important;
              }
            }
            //   input{
            //       border: none !important;
            //       &:hover{
            //           border: 1px solid #ccc !important;
            //       }
            //   }
          }
        }
      }
    }
    .ant-tabs-nav .ant-tabs-tab {
      font-weight: 600;
      font-size: 16px;
    }
    .ant-tabs-nav .ant-tabs-tab-active {
      color: #50baf3;
      border-bottom: 2px solid #50baf3;
      &:hover {
        color: #50baf3 !important;
      }
      &:focus {
        color: #50baf3 !important;
      }
    }
    .task {
      .baseInfo {
        display: flex;
        padding: 20px 0;
        flex-direction: row;
        flex-wrap: wrap;

        .title {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          border-radius: 3px;
          height: 40px;
          padding: 0 16px;
          color: #999;
          cursor: pointer;
          transition: all 0.2s;
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          span {
            color: #999;
          }
        }
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      .btn_box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .ant-pagination {
          color: #50baf3;
        }
        > div {
          margin: 10px 5px;
        }
        .Preview {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          text-decoration: none;

          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;

          border: 1px solid #50baf3;
          background: #fff;
          color: #50baf3;
          transition: color 0.5s;
          .text {
            font-size: 16px;
            font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
              BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
              Droid Sans, Helvetica Neue, sans-serif;
            font-weight: 600;
            line-height: 1;
            z-index: 4;
          }
          &:hover {
            color: #fff;
            &::after {
              height: 100%;
            }
          }
          &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 0;
            bottom: 0;
            left: 0;
            background: #50baf3;
            transition: height 0.5s;
            z-index: 0;
          }
        }
        .next {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          text-decoration: none;
          font-size: 16px;
          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;

          background-image: linear-gradient(
            270deg,
            rgba(80, 186, 243, 0.35),
            #50baf3,
            #50baf3,
            rgba(80, 186, 243, 0.35)
          );
          background-size: 200% 100%;
          color: #fff;
          cursor: pointer;
          transition: background-position 0.8s;
          &:hover {
            background-position: 100% 50%;
          }
        }
        .previous {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          text-decoration: none;
          font-size: 16px;
          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;

          background-image: linear-gradient(
            270deg,
            rgba(80, 186, 243, 0.35),
            #50baf3,
            #50baf3,
            rgba(80, 186, 243, 0.35)
          );
          background-size: 200% 100%;
          color: #fff;
          cursor: pointer;
          transition: background-position 0.8s;
          &:hover {
            background-position: 100% 50%;
          }
        }
      }
    }
    .page {
    }
  }
  .add_accounting {
    // margin:10px auto;
    display: flex;
    justify-content: center;
    // margin: 10px 0;
  }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
  .task_container {
    margin: auto;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    .AccountingEntries {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 0 20px 20px;
      list-style: none;
      .addAccounting {
        width: 100%;
        border-top: 1px solid #f1f1f1;
        padding: 20px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .AccountingEntriesPanel {
        width: 50%;

        min-height: 140px;
        padding: 5px;
        transition: 0.2s;
        .bg_add:hover {
          background: rgba(235, 235, 235, 0.5);
          transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .cen_ {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          //    align-content:center;
          justify-content: center;
        }
        .AccountingEntriesPanel_add {
          display: flex;
          flex-direction: column;
          align-items: center;
          align-content: center;
          cursor: pointer;
          height: 100%;
          border: 1px solid #ebebeb;
          color: #262a2f;
          font-size: 16px;
          padding: 10px 30px 20px;
          border-radius: 10px;
          box-shadow: 0px 8px 16px rgba(140, 160, 179, 18%);
          transition: 0.2s;
          &:hover .iconfont_ {
            transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform: rotate(90deg);
          }
          .iconfont_ {
            transform: rotate(0deg);
            transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            color: #50baf3;
            font-size: 46px;
            font-weight: 600;
            margin-right: 6px;
          }
        }
        .AccountingEntriesPanel_box {
          position: relative;
          cursor: pointer;
          height: 100%;
          border: 1px solid #ebebeb;
          color: #262a2f;
          font-size: 16px;
          padding: 10px 30px 20px;
          border-radius: 10px;
          box-shadow: 0px 8px 16px rgba(140, 160, 179, 18%);
          display: flex;
          flex-direction: column;
          // justify-content: center;
          background: #fff;
          transition: 0.2s;

          // &:hover {
          //   transition: 0.2s;
          //   background: rgba(221, 221, 221, 0.2);
          //   cursor: pointer;
          // }
          .delete {
            position: absolute;
            top: 0px;
            right: 10px;

            font-size: 12px;
            color: #ccc;
            line-height: 40px;
            cursor: pointer;
            .iconfont {
              font-size: 16px;
              font-weight: 700 !important;
              cursor: pointer;
              transform: rotate(0deg);
              transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              &:hover {
                color: rgb(47, 106, 233);
                transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                transform: rotate(90deg);
              }
            }
          }
          .row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            line-height: 30px;
            border-bottom: 1px solid #f1f1f1;
            .ant-input {
              width: 100%;
              border: 1px solid #fff;
              &:hover {
                border: 1px solid #40a9ff;
              }
            }

            .unit {
              min-width: 80px;
            }

            .name {
              display: flex;
              flex-direction: row;
              align-items: center;
              flex-wrap: nowrap;
              justify-content: flex-start;
              color: #50baf3;
              font-weight: 600;
              white-space: nowrap;
              font-size: 14px;

              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              .anticon {
                margin-right: 4px;
              }
            }
            .unit {
              .ant-select-selection {
                //   background-color: #f8f8f8 !important;
                border: 1px solid #fff !important;
              }
            }
            .type {
              width: 100%;
              .ant-select-selection {
                //   background-color: #f8f8f8 !important;
                //   border: 1px solid #f8f8f8 !important;
              }
            }
            //   input{
            //       border: none !important;
            //       &:hover{
            //           border: 1px solid #ccc !important;
            //       }
            //   }
          }
        }
      }
    }
    .ant-tabs-nav .ant-tabs-tab {
      font-weight: 600;
      font-size: 16px;
    }
    .ant-tabs-nav .ant-tabs-tab-active {
      color: #50baf3;
      border-bottom: 2px solid #50baf3;
      &:hover {
        color: #50baf3 !important;
      }
      &:focus {
        color: #50baf3 !important;
      }
    }
    .task {
      .baseInfo {
        display: flex;
        padding: 20px 0;
        flex-direction: row;
        flex-wrap: wrap;

        .title {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          border-radius: 3px;
          height: 40px;
          padding: 0 16px;
          color: #999;
          cursor: pointer;
          transition: all 0.2s;
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          span {
            color: #999;
          }
        }
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      .btn_box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .ant-pagination {
          color: #50baf3;
        }
        > div {
          margin: 10px 5px;
        }
        .Preview {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          text-decoration: none;

          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;

          border: 1px solid #50baf3;
          background: #fff;
          color: #50baf3;
          transition: color 0.5s;
          .text {
            font-size: 16px;
            font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
              BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
              Droid Sans, Helvetica Neue, sans-serif;
            font-weight: 600;
            line-height: 1;
            z-index: 4;
          }
          &:hover {
            color: #fff;
            &::after {
              height: 100%;
            }
          }
          &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 0;
            bottom: 0;
            left: 0;
            background: #50baf3;
            transition: height 0.5s;
            z-index: 0;
          }
        }
        .next {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          text-decoration: none;
          font-size: 16px;
          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;

          background-image: linear-gradient(
            270deg,
            rgba(80, 186, 243, 0.35),
            #50baf3,
            #50baf3,
            rgba(80, 186, 243, 0.35)
          );
          background-size: 200% 100%;
          color: #fff;
          cursor: pointer;
          transition: background-position 0.8s;
          &:hover {
            background-position: 100% 50%;
          }
        }
        .previous {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          text-decoration: none;
          font-size: 16px;
          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;

          background-image: linear-gradient(
            270deg,
            rgba(80, 186, 243, 0.35),
            #50baf3,
            #50baf3,
            rgba(80, 186, 243, 0.35)
          );
          background-size: 200% 100%;
          color: #fff;
          cursor: pointer;
          transition: background-position 0.8s;
          &:hover {
            background-position: 100% 50%;
          }
        }
      }
    }
    .page {
    }
  }
  .add_accounting {
    // margin:10px auto;
    display: flex;
    justify-content: center;
    // margin: 10px 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  .task_container {
    margin: auto;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    .AccountingEntries {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 0 10px 10px;
      list-style: none;
      .addAccounting {
        width: 100%;
        border-top: 1px solid #f1f1f1;
        padding: 20px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .AccountingEntriesPanel {
        width: 50%;
        margin-bottom: 0px;
        min-height: 140px;
        padding: 5px;
        transition: 0.2s;
        .bg_add:hover {
          background: rgba(235, 235, 235, 0.5);
          transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .cen_ {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          //    align-content:center;
          justify-content: center;
        }
        .AccountingEntriesPanel_add {
          display: flex;
          flex-direction: column;
          align-items: center;
          align-content: center;
          cursor: pointer;
          height: 100%;

          border: 1px solid #ebebeb;
          color: #262a2f;
          font-size: 16px;
          padding: 10px;
          border-radius: 10px;
          box-shadow: 0px 8px 16px rgba(140, 160, 179, 18%);
          transition: 0.2s;
          &:hover .iconfont_ {
            transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform: rotate(90deg);
          }
          .iconfont_ {
            transform: rotate(0deg);
            transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            color: #50baf3;
            font-size: 46px;
            font-weight: 600;
            margin-right: 6px;
          }
        }
        .AccountingEntriesPanel_box {
          position: relative;
          cursor: pointer;
          height: 100%;
          border: 1px solid #ebebeb;
          color: #262a2f;
          font-size: 16px;
          padding: 10px 10px 10px;
          border-radius: 10px;
          box-shadow: 0px 8px 16px rgba(140, 160, 179, 18%);
          display: flex;
          flex-direction: column;
          // justify-content: center;
          background: #fff;
          transition: 0.2s;

          // &:hover {
          //   transition: 0.2s;
          //   background: rgba(221, 221, 221, 0.2);
          //   cursor: pointer;
          // }
          .delete {
            position: absolute;
            top: 0px;
            right: 10px;

            font-size: 12px;
            color: #ccc;
            line-height: 40px;
            cursor: pointer;
            .iconfont {
              font-size: 16px;
              font-weight: 700 !important;
              cursor: pointer;
              transform: rotate(0deg);
              transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              &:hover {
                color: rgb(47, 106, 233);
                transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                transform: rotate(90deg);
              }
            }
          }
          .row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            line-height: 30px;
            border-bottom: 1px solid #f1f1f1;
            .ant-input {
              width: 100%;
              border: 1px solid #fff;
              &:hover {
                border: 1px solid #40a9ff;
              }
            }

            .unit {
              min-width: 80px;
            }

            .name {
              display: flex;
              flex-direction: row;
              align-items: center;
              flex-wrap: nowrap;
              justify-content: flex-start;
              color: #50baf3;
              font-weight: 600;
              white-space: nowrap;
              font-size: 14px;

              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              .anticon {
                margin-right: 4px;
              }
            }
            .unit {
              .ant-select-selection {
                //   background-color: #f8f8f8 !important;
                border: 1px solid #fff !important;
              }
            }
            .type {
              width: 100%;
              .ant-select-selection {
                //   background-color: #f8f8f8 !important;
                //   border: 1px solid #f8f8f8 !important;
              }
            }
            //   input{
            //       border: none !important;
            //       &:hover{
            //           border: 1px solid #ccc !important;
            //       }
            //   }
          }
        }
      }
    }
    .ant-tabs-nav .ant-tabs-tab {
      font-weight: 600;
      font-size: 16px;
      padding: 6px 6px;
      margin: 0 12px 0 0;
    }
    .ant-tabs-nav .ant-tabs-tab-active {
      color: #50baf3;
      border-bottom: 2px solid #50baf3;
      &:hover {
        color: #50baf3 !important;
      }
      &:focus {
        color: #50baf3 !important;
      }
    }
    .task {
      .baseInfo {
        display: flex;
        padding: 10px 0;
        flex-direction: column;
        flex-wrap: wrap;

        .title {
          display: flex;
          // align-items: center;

          flex-shrink: 0;
          border-radius: 3px;
          height: 40px;
          padding: 0 16px;
          flex-wrap: nowrap;
          color: #999;
          cursor: pointer;
          transition: all 0.2s;
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          margin-bottom: 10px;
          div {
            white-space: nowrap;
          }
          span {
            color: #999;
            text-align: left;
          }
        }
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      .btn_box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .ant-pagination {
          color: #50baf3;
        }
        > div {
          margin: 10px 5px;
        }
        .Preview {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          text-decoration: none;

          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;

          border: 1px solid #50baf3;
          background: #fff;
          color: #50baf3;
          transition: color 0.5s;
          .text {
            font-size: 16px;
            font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
              BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
              Droid Sans, Helvetica Neue, sans-serif;
            font-weight: 600;
            line-height: 1;
            z-index: 4;
          }
          &:hover {
            color: #fff;
            &::after {
              height: 100%;
            }
          }
          &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 0;
            bottom: 0;
            left: 0;
            background: #50baf3;
            transition: height 0.5s;
            z-index: 0;
          }
        }
        .next {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          text-decoration: none;
          font-size: 16px;
          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;

          background-image: linear-gradient(
            270deg,
            rgba(80, 186, 243, 0.35),
            #50baf3,
            #50baf3,
            rgba(80, 186, 243, 0.35)
          );
          background-size: 200% 100%;
          color: #fff;
          cursor: pointer;
          transition: background-position 0.8s;
          &:hover {
            background-position: 100% 50%;
          }
        }
        .previous {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          text-decoration: none;
          font-size: 16px;
          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;

          background-image: linear-gradient(
            270deg,
            rgba(80, 186, 243, 0.35),
            #50baf3,
            #50baf3,
            rgba(80, 186, 243, 0.35)
          );
          background-size: 200% 100%;
          color: #fff;
          cursor: pointer;
          transition: background-position 0.8s;
          &:hover {
            background-position: 100% 50%;
          }
        }
      }
    }
    .page {
    }
  }
  .add_accounting {
    // margin:10px auto;
    display: flex;
    justify-content: center;
    // margin: 10px 0;
  }
}
@media screen and (max-width: 767px) {
  .task_container {
    margin: auto;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    .AccountingEntries {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 0 10px 10px;
      list-style: none;
      .addAccounting {
        width: 100%;
        border-top: 1px solid #f1f1f1;
        padding: 20px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .AccountingEntriesPanel {
        width: 100%;
        margin-bottom: 0px;
        min-height: 140px;
        padding: 5px;
        transition: 0.2s;
        .bg_add:hover {
          background: rgba(235, 235, 235, 0.5);
          transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .cen_ {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          //    align-content:center;
          justify-content: center;
        }
        .AccountingEntriesPanel_add {
          display: flex;
          flex-direction: column;
          align-items: center;
          align-content: center;
          cursor: pointer;
          height: 100%;

          border: 1px solid #ebebeb;
          color: #262a2f;
          font-size: 16px;
          padding: 10px;
          border-radius: 10px;
          box-shadow: 0px 8px 16px rgba(140, 160, 179, 18%);
          transition: 0.2s;
          &:hover .iconfont_ {
            transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform: rotate(90deg);
          }
          .iconfont_ {
            transform: rotate(0deg);
            transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            color: #50baf3;
            font-size: 46px;
            font-weight: 600;
            margin-right: 6px;
          }
        }
        .AccountingEntriesPanel_box {
          position: relative;
          cursor: pointer;
          height: 100%;
          border: 1px solid #ebebeb;
          color: #262a2f;
          font-size: 16px;
          padding: 10px 10px 10px;
          border-radius: 10px;
          box-shadow: 0px 8px 16px rgba(140, 160, 179, 18%);
          display: flex;
          flex-direction: column;
          // justify-content: center;
          background: #fff;
          transition: 0.2s;

          // &:hover {
          //   transition: 0.2s;
          //   background: rgba(221, 221, 221, 0.2);
          //   cursor: pointer;
          // }
          .delete {
            position: absolute;
            top: 0px;
            right: 10px;

            font-size: 12px;
            color: #ccc;
            line-height: 40px;
            cursor: pointer;
            .iconfont {
              font-size: 16px;
              font-weight: 700 !important;
              cursor: pointer;
              transform: rotate(0deg);
              transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              &:hover {
                color: rgb(47, 106, 233);
                transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                transform: rotate(90deg);
              }
            }
          }
          .row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            line-height: 30px;
            border-bottom: 1px solid #f1f1f1;
            .ant-input {
              width: 100%;
              border: 1px solid #fff;
              &:hover {
                border: 1px solid #40a9ff;
              }
            }

            .unit {
              min-width: 80px;
            }

            .name {
              display: flex;
              flex-direction: row;
              align-items: center;
              flex-wrap: nowrap;
              justify-content: flex-start;
              color: #50baf3;
              font-weight: 600;
              white-space: nowrap;
              font-size: 14px;

              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              .anticon {
                margin-right: 4px;
              }
            }
            .unit {
              .ant-select-selection {
                //   background-color: #f8f8f8 !important;
                border: 1px solid #fff !important;
              }
            }
            .type {
              width: 100%;
              .ant-select-selection {
                //   background-color: #f8f8f8 !important;
                //   border: 1px solid #f8f8f8 !important;
              }
            }
            //   input{
            //       border: none !important;
            //       &:hover{
            //           border: 1px solid #ccc !important;
            //       }
            //   }
          }
        }
      }
    }
    .ant-tabs-nav .ant-tabs-tab {
      font-weight: 600;
      font-size: 16px;
      padding: 6px 6px;
      margin: 0 12px 0 0;
    }
    .ant-tabs-nav .ant-tabs-tab-active {
      color: #50baf3;
      border-bottom: 2px solid #50baf3;
      &:hover {
        color: #50baf3 !important;
      }
      &:focus {
        color: #50baf3 !important;
      }
    }
    .task {
      .baseInfo {
        display: flex;
        padding: 10px 0;
        flex-direction: column;
        flex-wrap: wrap;

        .title {
          display: flex;
          // align-items: center;

          flex-shrink: 0;
          border-radius: 3px;
          height: 40px;
          padding: 0 16px;
          flex-wrap: nowrap;
          color: #999;
          cursor: pointer;
          transition: all 0.2s;
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          margin-bottom: 10px;
          div {
            white-space: nowrap;
          }
          span {
            color: #999;
            text-align: left;
          }
        }
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      .btn_box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        .ant-pagination {
          color: #50baf3;
        }
        > div {
          margin: 3px 5px;
        }
        .Preview {
          flex: 1;
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          text-decoration: none;

          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;

          border: 1px solid #50baf3;
          background: #fff;
          color: #50baf3;
          transition: color 0.5s;
          .text {
            font-size: 16px;
            font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
              BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
              Droid Sans, Helvetica Neue, sans-serif;
            font-weight: 600;
            line-height: 1;
            z-index: 4;
          }
          &:hover {
            color: #fff;
            &::after {
              height: 100%;
            }
          }
          &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 0;
            bottom: 0;
            left: 0;
            background: #50baf3;
            transition: height 0.5s;
            z-index: 0;
          }
        }
        .next {
          flex: 1;
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          width: 100%;
          text-decoration: none;
          font-size: 16px;
          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;

          background-image: linear-gradient(
            270deg,
            rgba(80, 186, 243, 0.35),
            #50baf3,
            #50baf3,
            rgba(80, 186, 243, 0.35)
          );
          background-size: 200% 100%;
          color: #fff;
          cursor: pointer;
          transition: background-position 0.8s;
          &:hover {
            background-position: 100% 50%;
          }
        }
        .previous {
          flex: 1;
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 3px;
          height: 48px;
          text-decoration: none;
          font-size: 16px;
          cursor: pointer;
          outline: none;
          min-width: 140px;
          padding: 0 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;

          background-image: linear-gradient(
            270deg,
            rgba(80, 186, 243, 0.35),
            #50baf3,
            #50baf3,
            rgba(80, 186, 243, 0.35)
          );
          background-size: 200% 100%;
          color: #fff;
          cursor: pointer;
          transition: background-position 0.8s;
          &:hover {
            background-position: 100% 50%;
          }
        }
      }
    }
    .page {
    }
  }
  .add_accounting {
    // margin:10px auto;
    display: flex;
    justify-content: center;
    // margin: 10px 0;
  }
}
</style>